<!--
 * @Author: 刘霁雯
 * @Description: 购物车
 -->
<template>
    <div>
        <cli-title-customer style="overflow: hidden"></cli-title-customer>
        <div class="miandiv">
            <h1 style="margin-left: 30%;margin-top: 20%" v-if="carTable.length===0">购物车空空如也哦 ╮(๑•́ ₃•̀๑)╭</h1>
            <div class="orderList" v-for="(item,index) in carTable">
                <h3><img style="margin-top: 5%" src="../../../assets/image/carStore.png">{{item.storeName}}</h3>
                <el-table  :data="item.products" ref="multipleTable" stripe highlight-current-row border @selection-change="handleSelectionChange(...arguments,index)">
                    <el-table-column type="selection" header-align="center" align="center" width="55" ></el-table-column>
                    <el-table-column prop="productName" header-align="center" align="center" label="商品名称"></el-table-column>
                    <el-table-column prop="unitprice" header-align="center" align="center" label="单价"></el-table-column>
                    <el-table-column prop="quantity" header-align="center" align="center" label="件数">
                        <template slot-scope="scope">
                            <el-input-number   v-model="scope.row.quantity" size="mini" :step="1" @change="handleChange" :min="1" :max="999" label="描述文字"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" header-align="center" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="proDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="float: right;margin: 20px 0 20px 0">
                <el-button  type="success" @click="proBuy(item)">购买</el-button>
                <el-button  type="danger" @click="proDelete(item)">删除</el-button>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import CliTitleCustomer from "../../../components/base/cliTitleCustomer";
    import ProductList from "../../../components/base/productList";
    import POST from "../../../api/POST";
    import Cookie from "js-cookie"
    export default {
        components: {ProductList, CliTitleCustomer},
        data () {
            return {
                num23:'20',
                carTable:[],
                multipleSelection: []
            }
        },
        created () {
            this.getList()

        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(value,index) {
                // console.log(value)
                let alist =[]
                value.forEach(item=>{
                    let data ={
                        productno:item.productno,
                        quantity:item.quantity,
                        unitprice:item.unitprice
                    }
                    alist.push(data)
                })
                this.carTable[index].selectNo=alist;
                console.log(
                    this.carTable
                )
            },
            handleChange(value) {
                console.log(value);
            },
            proDetail(){

            },
            //购买
            proBuy(item){
                if(item.selectNo.length>0){
                    let data = {
                        token: Cookie.get('token'),
                        list:item.selectNo,
                        saleraccount:item.saleraccount,
                    }
                    POST.buyFromCar(data).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message:res.message,
                                type:'success'
                            })
                            this.getList()
                        }else if(res.code == 201){
                            this.$message({
                                message:res.message,
                                type:'success'
                            })
                        }

                    })
                }else {
                    this.$message({
                        message:'请先选择商品',
                    })
                }


            },
            //删除
            proDelete(item){
                if(item.selectNo.length>0){
                    let data = {
                        token: Cookie.get('token'),
                        list:item.selectNo,
                        saleraccount:item.saleraccount,
                    }
                    POST.delFromCar(data).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message:res.message,
                                type:'success'
                            })
                            this.getList()
                        }

                    })
                }else {
                    this.$message({
                        message:'请先选择商品',
                    })
                }

            },
            getList(){
                let data = {
                    token:Cookie.get('token')
                }
                this.carTable = []
                POST.viewCar(data).then(res=>{
                    res.push({})//可以遍历最后一个
                    let changeAccout = '';
                    let newItem = {};
                    res.forEach(item=>{
                        if(item.saleraccount!=changeAccout){
                            //如果是空就不放进去
                            if(newItem.storeName!==undefined){
                                this.carTable.push(newItem)
                            }
                            //新建一个商店项目
                            changeAccout = item.saleraccount;
                            newItem = {};
                            newItem.storeName = item.storename;
                            newItem.saleraccount = item.saleraccount;
                            newItem.products=[];
                            newItem.selectNo =[];
                            let product = {
                                productName:item.productname,
                                productno:item.productno,
                                quantity:item.quantity,
                                unitprice:item.unitprice
                            }
                            newItem.products.push(product);
                        }else {
                            let product = {
                                productName:item.productname,
                                productno:item.productno,
                                quantity:item.quantity,
                                unitprice:item.unitprice
                            }
                            newItem.products.push(product);
                        }
                    })
                    console.log(this.carTable)


                })


            },
            checked(val){
                console.log(val)
            }
        }
    }
</script>
<style scope>
    .miandiv{
        margin: 100px;
    }
    .orderList {
        margin-top: 80px;
    }
</style>
